<template>
 <!-- vue组件模板中一定要有一个根元素(不支持碎片化模板) -->
  <div class="App"> 
    <h1 class="content">我是App组件</h1>
    <input type="text" ref="ipEle">
    <button @click="getMsg">获取输入框的值</button>
  <Count/>
  </div>
</template>

<script>
import Count from "@/components/Count"
export default {
name:"App",
components:{
  Count
},
methods: {
  //点击按钮收集表单的值:
  //  推荐方法,把表单和数据进行数据双向绑定,直接获取数据的值即可
  //  ref方法,获取到表单的元素,进行DOM操作
  // ref的使用:
  //  如果想要获取某个真实DOM,则在当前模板元素上添加一个ref属性,值为一个字符串名称
  //  当模板渲染后,在当前的组件实例上的$refs对象中,就会有一个当前字符串名称的属性,值为被设置ref的真实DOM
    
  getMsg(){
    console.log(this);
    console.log(this.$refs.ipEle.value);
  }
},
}
</script>

<style>
</style>